<template>
    <el-container>
        <el-main>
            <StElDynamicForm @change="(form)=>{selectedAppCode = form.appCode}" :helper-form="helperForm" :submit-props="{method: 'get',loading: searchLoading,onSubmit:(form,data)=>{queryParams = $stObjectTools.clone(data)}}"
                             :options="searchFormOptions" :origin-prop="{inline: true,labelWidth: '100px'}">
                <template #buttons>
                    <el-button v-bind="$stElStyleTools.aiButtonStyle('添加')"
                              @click="addUserTag" size="mini">添加
                    </el-button>
                </template>
            </StElDynamicForm>
            <StElTable ref="steltable" :options="columns" @loading="(val)=>{searchLoading = val}" :datas="tableDatas" :query-params="queryParams">
                <template #append>
                    <el-table-column
                            label="操作"
                            width="200">
                        <template #default="{row,column,$index}">
                            <StElButtonGroup :group-param="{row,column,$index}" :operationMoreButtonOptions="{stype: 'link'}" :operations="tableOperations">
                            </StElButtonGroup>
                        </template>
                    </el-table-column>

                </template>
            </StElTable>
        </el-main>
    </el-container>
</template>

<script>
    import MpMixin from '../MpMixin.js'
    import MpUrl from '../MpUrl.js'
    export default {
        name: "MpUserTag",
        mixins: [MpMixin],
        props: {
        },
        computed: {
            tableDatas() {
                if(!this.queryParams.appCode){
                    return null
                }
                return this.$stStringTools.replaceb(this.MpUrl.MpUserTagList, this.queryParams)
            }
        },
        data() {
            return {
                // 仅添加用
                selectedAppCode: '',
                queryParams: {},
                searchLoading:  false,

                helperForm: {
                },

                searchFormOptions:[
                    {
                        field: {
                            name: 'appCode'
                        },
                        element:{
                            type: 'select',
                            required: true,
                            options:{
                                datas: MpUrl.configList,
                                optionProp:{
                                    value: 'appCode',
                                    label: 'appName'
                                }
                            },
                            label: '公众号',
                        }
                    },
                ],
                columns:[
                    {
                        prop: 'id',
                        label:'标签id'
                    },
                    {
                        prop: 'name',
                        label:'标签名称'
                    },
                    {
                        prop: 'count',
                        label:'粉丝数量'
                    }
                ],
                tableOperations: [{
                    label: '删除',
                    stype: 'link',
                    loading: false,
                    requestSuccess: ({groupParam}) => {
                        // 删除当前行，不重新请求
                        this.$refs.steltable.getTableData().splice(groupParam.$index, 1)
                    },
                    action: ({groupParam}) => {
                        return {
                            method: 'delete',
                            url: this.$stStringTools.replaceb(this.MpUrl.MpUserTagDelete, {appCode: this.queryParams.appCode,id: groupParam.row.id}),
                            confirmText: `确定删除 ${groupParam.row.name}吗`
                        }
                    }
                },
                    {
                        label: '修改',
                        stype: 'link',
                        action: ({groupParam}) => {
                            this.updateUserTag(groupParam)
                        }
                    },
                ]
            }
        },
        methods: {
            getAppCode(){
                return this.queryParams.appCode
            },
            addUserTag(){
                if(!this.selectedAppCode){
                    this.$message.error('请选择公众号')
                    return
                }
                this.$prompt('请输入标签名', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValidator:(value)=>{return !!value},
                    inputErrorMessage: '标签名不能为空'
                }).then(({ value }) => {
                    this.axios.post(this.$stStringTools.replaceb(this.MpUrl.MpUserTagAdd, {appCode: this.selectedAppCode}),'tagName=' + value)
                        .then(res=>{
                            this.$message.success('添加成功')
                            this.$refs.steltable.reloadData()
                        }).catch(error=>{
                            if(error.response){
                                if (error.response.data && error.response.data.errorMsg) {
                                    this.$message.error(error.response.data.errorMsg)
                                }
                            }else {
                                this.$message.error('网络错误或服务不可用')
                            }
                    })
                }).catch(() => {

                })
            },
            updateUserTag(groupParam){

                if(!this.getAppCode()){
                    this.$message.error('请选择公众号')
                    return
                }

                this.$prompt('请输入新的标签名', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue: groupParam.row.name,
                    inputValidator:(value)=>{return !!value},
                    inputErrorMessage: '标签名不能为空'
                }).then(({ value }) => {
                    this.axios.put(this.$stStringTools.replaceb(this.MpUrl.MpUserTagUpdate, {appCode: this.queryParams.appCode,id: groupParam.row.id}),'tagName=' + value)
                        .then(res=>{
                            this.$message.success('修改成功')
                            groupParam.row.name = value
                            // 不重新请求
                            this.$refs.steltable.getTableData().splice(groupParam.$index, 1,groupParam.row)
                        }).catch(error=>{
                            if(error.response){
                                if(error.response.data && error.response.data.errorMsg){
                                    this.$message.error(error.response.data.errorMsg)
                                }
                            }else {
                                this.$message.error('网络错误或服务不可用')
                            }
                    })
                }).catch(() => {

                })
            },
        }
    }
</script>

<style scoped>

</style>